<template>
    <div>
        <vue-office-excel :src="excel" :options="options" style="height: 100vh;" @rendered="renderedHandler"
            @error="errorHandler" />
    </div>
</template>

<script>
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css'
export default {
    name: "VueOfficeExcelDemo",
    components: {
        VueOfficeExcel
    },
    data() {
        return {
            options: {
                xls: true,       //预览xlsx文件设为false；预览xls文件设为true
                minColLength: 10,  // excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.
                minRowLength: 10,  // excel最少渲染多少行，如果想实现根据xlsx实际函数渲染，可以将此值设置为0.
                widthOffset: 10,  //如果渲染出来的结果感觉单元格宽度不够，可以在默认渲染的列表宽度上再加 Npx宽
                heightOffset: 10, //在默认渲染的列表高度上再加 Npx高
                beforeTransformData: (workbookData) => { return workbookData }, //底层通过exceljs获取excel文件内容，通过该钩子函数，可以对获取的excel文件内容进行修改，比如某个单元格的数据显示不正确，可以在此自行修改每个单元格的value值。
                transformData: (workbookData) => { return workbookData }, //将获取到的excel数据进行处理之后且渲染到页面之前，可通过transformData对即将渲染的数据及样式进行修改，此时每个单元格的text值就是即将渲染到页面上的内容
            },
            excel: '/api/api/v1/download-shared-object/aHR0cDovLzEyNy4wLjAuMTo5MDAwL3Nlbmlvci12YWx2ZS1odWIvdHV0b3JpYWxzLyVFNiU4QSVBNSVFNSU5MSU4QSVFOCVBNyVBMyVFOCVBRiVCQiVFNyU5QiVCOCVFNSU4NSVCMyVFNyU5NiVCRSVFNyU5NyU4NSVFNSU5MiU4Q1BhbmVsJUU2JUIxJTg3JUU2JTgwJUJCJUU2JUI4JTg1JUU1JThEJTk1VjEuMC54bHN4P1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9NEcyS0RCS1RJSkpSVjFOVFUyTEclMkYyMDI1MDUyMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTA1MjNUMTAzNTI4WiZYLUFtei1FeHBpcmVzPTQzMjAwJlgtQW16LVNlY3VyaXR5LVRva2VuPWV5SmhiR2NpT2lKSVV6VXhNaUlzSW5SNWNDSTZJa3BYVkNKOS5leUpoWTJObGMzTkxaWGtpT2lJMFJ6SkxSRUpMVkVsS1NsSldNVTVVVlRKTVJ5SXNJbVY0Y0NJNk1UYzBPREF6TmpBeU1Td2ljR0Z5Wlc1MElqb2liV2x1YVc5aFpHMXBiaUo5LjNsR251TVNLT0xkNF9Tdk10aVBxSDhtM3pXTDdTM3lqS2pFTHIwUHJXUHotSl9nTVRQTVdqdkp5WURsd3g5LWkxUWdlelV6S19ULXhMRnIzMWZKSUtBJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZ2ZXJzaW9uSWQ9bnVsbCZYLUFtei1TaWduYXR1cmU9NzZkYWM2MzBiNTMwM2NhYTVmY2RjZGQzODA4MDZiZjRlOTQ5MDU4ZjA5ZDU4MzcyN2I1ZWY3YjJhZjY4MjhjMw'//设置文档地址
        }
    },
    methods: {
        renderedHandler() {
            console.log("渲染完成")
        },
        errorHandler() {
            console.log("渲染失败")
        }
    }
};
</script>

<style scoped></style>